<template >
  <div class="paper1">

  <div style="margin-bottom: 100px">
    <div style="margin:10px 0;">
      <el-card class="paper1-card">
        <div style="display:flex">
          <span style="font-size:20px">{{ form.name }}</span>

          <span style="font-size:10px;margin-top:4px;margin-left: 10px"> 教室:{{ form.classroom }}</span>
        </div>



        <div style="margin:8px 5px;font-size: 14px">考试时长：{{ form.druation }}分钟 &nbsp; &nbsp; &nbsp; 总分：{{
            paperSum
          }}分
        </div>
        <hr/>
        <transition-group
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__backInUp"
          leave-active-class="animate__backOutUp">
        <div v-for="(item,index) in questions" :key="item.id" style="margin:18px 0">
          <div style="margin:15px 0;;font-size:15px;color: #232323;font-family: \5FAE\8F6F\96C5\9ED1"><span>{{
              index + 1
            }}.</span>{{ item.name }}
            <span style="font-size: 14px" v-if="item.type==1">(选择题 {{ item.score }}分)</span>
            <span style="font-size: 14px" v-if="item.type==2">(判断题 {{ item.score }}分)</span>
            <span style="font-size: 14px" v-if="item.type==3">(简答题 {{ item.score }}分)</span>
          </div>
          <div v-if="item.type==1" style="margin:10px">
            <div style="margin-right: 20px">
              <el-radio v-model="item['studentAnswer']" label="A">A. {{ item.a }}</el-radio>
            </div>
            <div style="margin-right: 20px;margin-top: 8px">
              <el-radio v-model="item['studentAnswer']" label="B">B. {{ item.b }}
              </el-radio>
            </div>
            <div style="margin-right: 20px;margin-top: 8px">
              <el-radio v-model="item['studentAnswer']" label="C">C. {{ item.c }}
              </el-radio>
            </div>
            <div style="margin-right: 20px;margin-top: 8px" v-if="item.d">
              <el-radio v-model="item['studentAnswer']" label="D">D. {{ item.d }}
              </el-radio>
            </div>
          </div>

          <div v-if="item.type==2" style="margin:10px">
            <div style="margin-right: 20px">
              <el-radio v-model="item['studentAnswer']" label="是">是</el-radio>
            </div>
            <div style="margin-top: 8px">
              <el-radio v-model="item['studentAnswer']" label="否">否</el-radio>
            </div>

          </div>

          <div v-if="item.type==3" style="margin:10px">
            <el-input type="textarea" rows="4" v-model="item['studentAnswer']"></el-input>


          </div>

          <!--          <div style="margin:10px">

                      答案： {{ item.answer }}
                    </div>
                    <div style="margin:10px">

                      解析： {{ item.detail }}
                    </div>-->
        </div> </transition-group>
      </el-card>


    </div>
    <div style="margin: 50px;text-align:center;">

      <!--      <el-button size="medium"  style="margin-bottom:50px" type="primary" @click="$router.push('/front/home')">返回</el-button>-->
      <el-button size="medium" style="margin-bottom: 0px" type="primary" @click="submitPaper">提交</el-button>

    </div>

  </div>


  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Paper",
  data() {
    return {
      paperSum: '',
      totalTime: '',
      questions: [],
      examId: this.$route.query.examId,
      form: {}
    }
  },
  created() {
    this.request.get('/exam/selectExamById/' + this.examId).then(r => {
      this.form = r.data;
    })
    this.request.get("/examPaper/exam/" + this.examId).then(res => {
      request.get("/paper/viewPaper/" + res.data.paperId).then(res => {
        this.questions = res.data
        var sum = 0;
        this.questions.forEach(item => {
          sum = parseInt(item.score) + sum;
        })
        this.paperSum = sum;
      })

    })


  },
  /*  beforeRouteLeave(to, from, next) {
      this.$confirm("你确定要离开考试页面", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          next(true);
        })
        .catch(() => {
          next(false);
        });
    },*/
  methods: {
    submitPaper() {
      let param = {
        examId: this.examId,
        paper: JSON.stringify(this.questions)
      }
      this.$confirm("你确定要提交试卷", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: 'msgbox',
        type: 'warning'
      })
        .then(() => {
          let arr = []
          this.questions.forEach(s => {
            if (s.studentAnswer != undefined) {
              arr.push(s.studentAnswer);
            }
          })

          if (arr.length == 0) {
            this.$message.warning("请不要交白卷！")
            return
          }
          if (arr.length < this.questions.length) {
            this.$message.warning("您还有题目没答完，请继续答题！")
            return
          }

          this.request.post('/studentPaper/save', param).then(res => {
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.$router.push('/front/home')
            } else {
              this.$message.error(res.msg);
            }
          })

        })
        .catch(() => {
          this.$message({
            message: '请继续答题',
            type: 'success'
          })
          next(false);
        });

    }

  }
}
</script>

<style lang="scss" scope>
.paper1{

}
@media (max-width: 720px) {
  .msgbox{
    width: 327px !important;
  }

  .el-message .el-message--error {
    width:327px  !important;
  }



}
.paper1-card{
  width:900px;
  margin:0 auto;
}
@media screen and (max-width: 415px) {
  .paper1-card {
    width:100%;
  }
}

@media only screen and (min-width:655px) and (max-width:1200px){
  .paper1-card {
    width:80%;
  }
}

@media only screen and (min-width:415px) and (max-width:655px){
  .paper1-card {
    width:90%;
  }
}
</style>

